<template>
  <a class="recommend_item">
    <img :src="recommend.thumb_url" style="width: 100%"/>
    <h4 class="item-title">{{recommend.short_name}}</h4>
    <div class="item-bottom">
      <span class="item-price">${{recommend.price/100}}</span>
      <span class="item-sales">{{recommend.sales_tip}}</span>
      <button class="item-btn">找相关</button>
    </div>
  </a>
</template>

<script>
    export default {
      name: "shoplist",
      props:{
        recommend:Object
      }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .recommend_item:nth-child(2n-1)
    margin-right  2%
  .recommend_item
    width 49%
    background-color #fff
    padding-bottom 15px
    margin-bottom 15px
    .item-title
      line-height 20px
      font-size 13px
      font-weight lighter
      height 20px
      overflow hidden
      margin 5px 0
      padding 0 5px
    .item-bottom
      display: flex
      flex-direction row
      align-items center
      padding 0 6px
      .item-price
        flex 1
        color red
        font-weight bolder
        font-size 12px
      .item-sales
        flex 2
        font-size 10px
        color #666
      .item-btn
        flex 1
        border 1px solid orange
        height 26px
        border-radius  5px
        background-color transparent
        color red
        font-size 10px
</style>
